<template>
  <div class="realtime-chart-panel">
    <div class="panel-header" :class="getPanelClass()">
      <h3>{{ title }}</h3>
      <div class="chart-controls">
        <!-- <button v-if="isSpeedPanel" class="config-btn" @click="showSpeedConfig = !showSpeedConfig" :title="showSpeedConfig ? '关闭设置' : '风速区间设置'">
          {{ showSpeedConfig ? '✕' : '⚙️' }}
        </button> -->
        <button class="mode-toggle" @click="toggleChartMode">
          {{ displayMode === 'line' ? '切换柱状图' : '切换曲线图' }}
        </button>
      </div>
    </div>
    <div class="panel-content">
      <line-charts 
        :options="chartOptions" 
        :height="isDirectionPanel ? '280px' : '230px'"
      />
    </div>
    
    <!-- 风速区间配置弹窗 -->
    <div v-if="isSpeedPanel && showSpeedConfig" class="speed-config-modal">
      <div class="modal-overlay" @click="showSpeedConfig = false"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">风速区间设置</h3>
          <button class="modal-close" @click="showSpeedConfig = false">✕</button>
        </div>
        <div class="modal-body">
          <div class="config-row">
            <span class="config-label">区间边界(单位 m/s)：</span>
            <div class="config-inputs">
              <span class="config-fixed">[0,</span>
              <input class="config-input" v-model.number="speedFormEdges[0]" type="number" step="1" />
              <span>,</span>
              <input class="config-input" v-model.number="speedFormEdges[1]" type="number" step="1" />
              <span>,</span>
              <input class="config-input" v-model.number="speedFormEdges[2]" type="number" step="1" />
              <span>,</span>
              <input class="config-input" v-model.number="speedFormEdges[3]" type="number" step="1" />
              <span>, +∞)</span>
            </div>
          </div>
          <div class="config-tip">要求：0 ≤ 边界1 &lt; 边界2 &lt; 边界3 &lt; 边界4</div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn modal-btn-cancel" @click="showSpeedConfig = false">取消</button>
          <button class="modal-btn modal-btn-save" @click="saveSpeedEdges">保存</button>
        </div>
      </div>
    </div>
    
    <!-- 最大值信息 -->
    <div class="max-info-panel" v-if="isSpeedPanel">
      <!-- 实时风速面板：显示最大风速和位置 -->
        <div class="info-item clickable" @click="showMaxSpeedFlag">
          <span class="info-label">最大风速:</span>
          <span class="info-value">{{ maxSpeed }} m/s</span>
        </div>
        <div class="info-item">
          <span class="info-label">位置:</span>
          <span class="info-value">{{ maxPosition }}</span>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import echarts from '@/views/components/dataScreen/echarts'
import LineCharts from '@/views/components/dataScreen/realTimeEcharts'

import dayjs from 'dayjs'

const props = defineProps({
  title: {
    type: String,
    default: '实时数据'
  },
  yAxisMin: {
    type: Number,
    default: 0
  },
  yAxisMax: {
    type: Number,
    default: 50
  },
  dataType: {
    type: String,
    default: 'A' // A 或 B
  },
  speed: {
    type: Array,
    default: () => []
  },
  direction: {
    type: Array,
    default: () => []
  },
  time: {
    type: Array,
    default: () => []
  },
  lng: {
    type: Array,
    default: () => []
  },
  lat: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['showMaxSpeedFlag', 'showMaxDirectionFlag'])

const autoUpdate = ref(true)
const displayMode = ref('line') // 'line' | 'bar'
const dataPoints = ref([])
const timeLabels = ref([])

// 风速区间配置相关 - 使用风雨图例的14个等级
const SPEED_EDGES_KEY = 'realtime_chart_speed_edges'
const showSpeedConfig = ref(false)
// 风雨图例的边界值：0, 0.2, 0.3, 1.5, 1.6, 3.3, 3.4, 5.4, 5.5, 7.9, 8.0, 10.7, 10.8, 13.8, 13.9, 17.1, 17.2, 20.7, 20.8, 24.4, 24.5, 28.4, 28.5, 32.6, 32.7, 36.9, Infinity
const speedBinEdges = ref([0, 0.2, 0.3, 1.5, 1.6, 3.3, 3.4, 5.4, 5.5, 7.9, 8.0, 10.7, 10.8, 13.8, 13.9, 17.1, 17.2, 20.7, 20.8, 24.4, 24.5, 28.4, 28.5, 32.6, 32.7, 36.9, Infinity])
const speedFormEdges = ref([4, 8, 12, 16])

// 初始化：使用风雨图例的14个等级边界值
// 不再从 localStorage 读取自定义设置，始终使用风雨图例的标准边界值
// 风雨图例边界值：[0, 0.2, 0.3, 1.5, 1.6, 3.3, 3.4, 5.4, 5.5, 7.9, 8.0, 10.7, 10.8, 13.8, 13.9, 17.1, 17.2, 20.7, 20.8, 24.4, 24.5, 28.4, 28.5, 32.6, 32.7, 36.9, Infinity]

// 最大值信息
const maxDirection = ref(0)
const maxSpeed = ref(0)
const maxPosition = ref('--')

// 旗子显示状态
const showFlag = ref(false)
const flagPosition = ref({ lng: 0, lat: 0 })

// 方向名称映射
const getCompassDirection = (angle) => {
  const normalizedAngle = ((Number(angle) % 360) + 360) % 360
  if (normalizedAngle >= 337.5 || normalizedAngle < 22.5) {
    return '北N'
  } else if (normalizedAngle >= 22.5 && normalizedAngle < 67.5) {
    return '东北NE'
  } else if (normalizedAngle >= 67.5 && normalizedAngle < 112.5) {
    return '东E'
  } else if (normalizedAngle >= 112.5 && normalizedAngle < 157.5) {
    return '东南SE'
  } else if (normalizedAngle >= 157.5 && normalizedAngle < 202.5) {
    return '南S'
  } else if (normalizedAngle >= 202.5 && normalizedAngle < 247.5) {
    return '西南SW'
  } else if (normalizedAngle >= 247.5 && normalizedAngle < 292.5) {
    return '西W'
  } else if (normalizedAngle >= 292.5 && normalizedAngle < 337.5) {
    return '西北NW'
  }
  return ''
}

const getRangeDirectionLabel = (rangeText) => {
  if (!rangeText || typeof rangeText !== 'string') return ''
  const parts = rangeText.split('-')
  if (parts.length !== 2) return ''
  const start = Number(parts[0])
  const end = Number(parts[1])
  if (!Number.isFinite(start) || !Number.isFinite(end)) return ''
  const center = (start + end) / 2
  return getCompassDirection(center)
}

// 计算风速区间标签 - 按照风雨图例格式
const speedBinLabels = computed(() => {
  const edges = speedBinEdges.value
  const labels = []
  for (let i = 0; i < edges.length - 1; i++) {
    const a = edges[i]
    const b = edges[i + 1]
    if (b === Infinity) {
      labels.push(`> ${a}`)
    } else {
      labels.push(`${a} ~ ${b}`)
    }
  }
  return labels
})

// 保存风速区间设置
function saveSpeedEdges() {
  const [e1, e2, e3, e4] = speedFormEdges.value
  if (!(e1 >= 0 && e1 < e2 && e2 < e3 && e3 < e4)) {
    alert('区间需满足：0 ≤ 边界1 < 边界2 < 边界3 < 边界4')
    return
  }
  speedBinEdges.value = [0, e1, e2, e3, e4, Infinity]
  try {
    localStorage.setItem(SPEED_EDGES_KEY, JSON.stringify([e1, e2, e3, e4]))
  } catch (e) {
    console.warn('保存风速区间边界失败:', e)
  }
  showSpeedConfig.value = false
}

// 计算图表配置
const chartOptions = computed(() => {
  const isSpeed = props.dataType === 'A'
  const data = isSpeed ? props.speed : props.direction
  const labels = isSpeed
    ? speedBinLabels.value
    : ['0-45', '45-90', '90-135', '135-180', '180-225', '225-270', '270-315', '315-360'].map((r) => `${r}\n${getRangeDirectionLabel(r)}`)

  if (!data || data.length === 0) {
    return {
      backgroundColor: 'transparent',
      grid: { left: '5%', right: '10%', top: '15%', bottom: '2%', containLabel: true },
      xAxis: { type: 'category', data: labels },
      yAxis: { type: 'value', name: '占比', max: 100 },
      series: [{ data: [], type: 'line' }]
    }
  }

  // 构建直方图区间 - 按照风雨图例的区间规则，计算占比
  const buildSpeedBins = (arr) => {
    const edges = speedBinEdges.value
    const bins = new Array(edges.length - 1).fill(0)
    let totalCount = 0
    for (const v of arr || []) {
      const s = Number(v)
      if (!Number.isFinite(s)) continue
      totalCount++
      
      // 找到对应的区间 - 风雨图例的区间是左闭右闭的 [min, max]
      for (let i = 0; i < edges.length - 1; i++) {
        const lower = edges[i]
        const upper = edges[i + 1]
        // 对于非连续区间，使用 <= 来包含上边界
        if (s >= lower && (upper === Infinity || s <= upper)) {
          bins[i]++
          break
        }
      }
    }
    // 转换为占比（百分比）
    return totalCount > 0 ? bins.map(count => (count / totalCount) * 100) : bins
  }

  const buildDirectionBins = (arr) => {
    const bins = new Array(8).fill(0)
    let totalCount = 0
    for (const v of arr || []) {
      let d = Number(v)
      if (!Number.isFinite(d)) continue
      totalCount++
      d = ((d % 360) + 360) % 360
      const idx = Math.min(7, Math.floor(d / 45))
      bins[idx]++
    }
    // 转换为占比（百分比）
    return totalCount > 0 ? bins.map(count => (count / totalCount) * 100) : bins
  }

  const yCounts = isSpeed ? buildSpeedBins(data) : buildDirectionBins(data)

  return {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '10%',
      top: '15%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 12,
        formatter: function (value) { return value }
      }
    },
    yAxis: {
      type: 'value',
      name: '占比',
      max: 100,
      nameTextStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [
      {
        data: yCounts,
        type: displayMode.value === 'bar' ? 'bar' : 'line',
        barWidth: displayMode.value === 'bar' ? '55%' : undefined,
        smooth: displayMode.value === 'line',
        lineStyle: displayMode.value === 'line' ? { color: isSpeed ? '#06b6d4' : '#f59e0b', width: 3 } : undefined,
        itemStyle: displayMode.value === 'line' ? { color: isSpeed ? '#06b6d4' : '#f59e0b', borderWidth: 2, borderColor: '#ffffff' } : { color: isSpeed ? '#22d3ee' : '#fbbf24' },
        symbol: displayMode.value === 'line' ? 'circle' : undefined,
        symbolSize: displayMode.value === 'line' ? 6 : undefined,
        areaStyle: displayMode.value === 'line' ? { color: isSpeed ? 'rgba(6, 182, 212, 0.12)' : 'rgba(245, 158, 11, 0.12)' } : undefined
      }
    ],
    tooltip: {
      trigger: 'axis',
      show: true,
      appendToBody: true,
      confine: true,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: 'rgba(24, 150, 146, 0.6)',
      borderWidth: 1,
      textStyle: {
        color: '#000000',
        fontSize: 12
      },

      formatter: function(params) {
        if (params && params.length > 0) {
          const param = params[0];
          const dataType = props.dataType === 'A' ? '风速' : '风向';
          const unit = props.dataType === 'A' ? 'm/s' : '°';
          return `${param.axisValue}<br/>占比: ${param.value.toFixed(2)}%`;
        }
        return '无数据';
      }
    }
  }
})

// 根据标题和数据类型返回对应的CSS类
const getPanelClass = () => {
  const title = props.title.toLowerCase()
  if (title.includes('风速') || title.includes('speed')) {
    return 'speed-panel'
  } else if (title.includes('风向') || title.includes('direction')) {
    return 'direction-panel'
  }
  return 'default-panel'
}

// 判断面板类型
const isSpeedPanel = computed(() => {
  const title = props.title.toLowerCase()
  return title.includes('风速') || title.includes('speed')
})

const isDirectionPanel = computed(() => {
  const title = props.title.toLowerCase()
  return title.includes('风向') || title.includes('direction')
})

// 计算最大值信息
const calculateMaxValues = () => {
  console.log('calculateMaxValues called')
  console.log('props.dataType:', props.dataType)
  console.log('props.speed.length:', props.speed.length)
  console.log('props.direction.length:', props.direction.length)
  console.log('props.lng.length:', props.lng?.length)
  console.log('props.lat.length:', props.lat?.length)
  
  if (props.dataType === 'A' && props.speed.length > 0) {
    // 风速数据
     maxSpeed.value = Math.max(
      ...props.speed,
     )
    // 使用传入的数据经纬度
    let wind= props.lng.find((r)=>r.windSpeed==maxSpeed.value)
    const lng = Number(wind.xCoordinate).toFixed(6)
    const lat =  Number(wind.yCoordinate).toFixed(6)
    maxPosition.value = `${lng}, ${lat}`
    
    // 保存旗子位置
    flagPosition.value = {
      lng: parseFloat(lng),
      lat: parseFloat(lat)
    }
    console.log('Speed panel - flagPosition set to:', flagPosition.value)
  } else if (props.dataType === 'B' && props.direction.length > 0) {

        // 风速数据
        maxDirection.value = Math.max(
      ...props.direction,
        )
     
   
   // 使用传入的数据经纬度
   let wind= props.lng.find((r)=>r.windDirection==maxDirection.value)
    const lng = Number(wind.xCoordinate).toFixed(6)
    const lat =  Number(wind.yCoordinate).toFixed(6)
    maxPosition.value = `${lng}, ${lat}`
    
    // 保存旗子位置
    flagPosition.value = {
      lng: parseFloat(lng),
      lat: parseFloat(lat)
    }
  } else {
    maxDirection.value = 0
    maxSpeed.value = 0
    maxPosition.value = '--'
    console.log('No valid data for flag position')
  }
}

// 显示最大风速旗子
const showMaxSpeedFlag = () => {
  console.log('showMaxSpeedFlag called')
  console.log('isSpeedPanel:', isSpeedPanel.value)
  console.log('flagPosition:', flagPosition.value)
  console.log('maxSpeed:', maxSpeed.value)
  
  if (isSpeedPanel.value && flagPosition.value.lng && flagPosition.value.lat) {
    // 始终显示旗子
    showFlag.value = true
    console.log('Emitting showMaxSpeedFlag event with:', {
      show: true,
      position: flagPosition.value,
      speed: maxSpeed.value
    })
    
    // 触发父组件事件，在地图上显示旗子
    emit('showMaxSpeedFlag', {
      show: true,
      position: flagPosition.value,
      speed: maxSpeed.value
    })
  } else {
    console.log('Conditions not met for showing flag')
  }
}

// 显示最大风向图标
const showMaxDirectionFlag = () => {
  console.log('showMaxDirectionFlag called')
  console.log('isDirectionPanel:', isDirectionPanel.value)
  console.log('flagPosition:', flagPosition.value)
  console.log('maxDirection:', maxDirection.value)
  
  if (isDirectionPanel.value && flagPosition.value.lng && flagPosition.value.lat) {
    emit('showMaxDirectionFlag', {
      show: true,
      position: flagPosition.value,
      direction: maxDirection.value
    })
  }
}






// 定时器
let updateTimer = null



const stopUpdate = () => {
  if (updateTimer) {
    clearInterval(updateTimer)
    updateTimer = null
  }
}



const toggleChartMode = () => {
  console.log('toggleChartMode clicked, current:', displayMode.value)
  displayMode.value = displayMode.value === 'line' ? 'bar' : 'line'
}

// 监听数据变化，计算最大值
watch([() => props.speed, () => props.direction, () => props.time], () => {
  calculateMaxValues()
}, { deep: true, immediate: true })


onMounted(async () => {
  console.log('Component mounted, waiting for data...')
})

onBeforeUnmount(() => {
  stopUpdate()
})


</script>

<style scoped lang="scss">
.realtime-chart-panel {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px;
  color: #ffffff;
  min-width: 350px;
  box-shadow: none;
  height: 100%;
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, rgba(24, 150, 146, 0.8) 0%, rgba(24, 150, 146, 0.6) 100%);
    border: 1px solid rgba(24, 150, 146, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(24, 150, 146, 0.2);
    position: relative;
    overflow: hidden;
    min-height: 40px;
    backdrop-filter: blur(8px);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
      pointer-events: none;
    }
    
    h3 {
      margin: 0;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      letter-spacing: 1px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      
      &::before {
        content: '';
        font-size: 16px;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
        animation: iconPulse 2s ease-in-out infinite;
      }
      
      &::after {
        content: '';
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 20px;
        background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.3) 100%);
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255,255,255,0.5);
      }
    }
    
    // 根据数据类型设置不同的图标
    &.speed-panel h3::before {
      content: '💨'; // 风速图标
    }
    
    &.direction-panel h3::before {
      content: '🧭'; // 风向图标
    }
    
    &.default-panel h3::before {
      content: '📊'; // 默认图表图标
    }
    
    // 根据数据类型调整面板高度
    &.speed-panel {
      padding: 9px 16px;
      min-height: 0px;
    }
    
    &.direction-panel {
      padding: 10px 16px;
      min-height: 45px;
    }
    
    &.default-panel {
      padding: 11px 16px;
      min-height: 40px;
    }
    
    .chart-controls {
      display: flex;
      gap: 8px;
      
      button.mode-toggle, button.config-btn {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 12px;
        font-weight: 500;
        
        &:hover {
          background: rgba(255, 255, 255, 0.3);
          border-color: rgba(255, 255, 255, 0.5);
          color: #ffffff;
        }
        
        &:active {
          transform: translateY(1px);
        }
      }
      
      // 确保配置按钮图标为白色
      button.config-btn {
        color: #ffffff !important;
        filter: brightness(0) invert(1);
        
        &:hover {
          color: #ffffff !important;
          filter: brightness(0) invert(1);
        }
      }
    }
  }
  
  // 风速区间配置弹窗样式
  .speed-config-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
    }
    
    .modal-content {
      position: relative;
      background: linear-gradient(135deg, rgba(24, 150, 146, 0.95) 0%, rgba(24, 150, 146, 0.9) 100%);
      border-radius: 12px;
      border: 1px solid rgba(24, 150, 146, 0.6);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(16px);
      min-width: 400px;
      max-width: 90vw;
      animation: modalSlideIn 0.3s ease-out;
      
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        
        .modal-title {
          color: #ffffff;
          font-size: 16px;
          font-weight: 600;
          margin: 0;
        }
        
        .modal-close {
          background: none;
          border: none;
          color: #ffffff;
          font-size: 18px;
          cursor: pointer;
          padding: 4px;
          border-radius: 4px;
          transition: all 0.2s ease;
          
          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
      
      .modal-body {
        padding: 20px;
        
        .config-row {
          margin-bottom: 16px;
          
          .config-label {
            display: block;
            color: #ffffff;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 12px;
          }
          
          .config-inputs {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            
            .config-fixed {
              color: #ffffff;
              font-size: 14px;
              font-weight: 500;
            }
            
            .config-input {
              width: 60px;
              height: 32px;
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.3);
              border-radius: 6px;
              color: #ffffff;
              text-align: center;
              font-size: 13px;
              font-weight: 500;
              
              &:focus {
                outline: none;
                border-color: rgba(255, 255, 255, 0.8);
                background: rgba(255, 255, 255, 0.2);
                box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
              }
              
              &::placeholder {
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
        
        .config-tip {
          color: rgba(255, 255, 255, 0.8);
          font-size: 12px;
          text-align: center;
          font-style: italic;
          background: rgba(255, 255, 255, 0.1);
          padding: 8px 12px;
          border-radius: 6px;
          border: 1px solid rgba(255, 255, 255, 0.2);
        }
      }
      
      .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        
        .modal-btn {
          padding: 8px 16px;
          border-radius: 6px;
          font-size: 13px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          border: 1px solid transparent;
          
          &.modal-btn-cancel {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.3);
            
            &:hover {
              background: rgba(255, 255, 255, 0.2);
              border-color: rgba(255, 255, 255, 0.5);
            }
          }
          
          &.modal-btn-save {
            background: rgba(255, 255, 255, 0.9);
            color: rgba(24, 150, 146, 1);
            font-weight: 600;
            
            &:hover {
              background: #ffffff;
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
        }
      }
    }
  }
  
  // 弹窗动画
  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  // 最大值信息面板样式
  .max-info-panel {
    background: linear-gradient(135deg, rgba(24, 150, 146, 0.3) 0%, rgba(24, 150, 146, 0.2) 100%);
    border-radius: 6px;
    padding: 6px;
    margin-top: 6px;
    border: 1px solid rgba(24, 150, 146, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(24, 150, 146, 0.1);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(24, 150, 146, 0.8) 0%, rgba(24, 150, 146, 0.6) 50%, rgba(24, 150, 146, 0.4) 100%);
    }
    
      .info-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px 4px;
        background: linear-gradient(135deg, rgba(24, 150, 146, 0.2) 0%, rgba(24, 150, 146, 0.1) 100%);
        border-radius: 4px;
        border: 1px solid rgba(24, 150, 146, 0.3);
        transition: all 0.2s ease;
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        
        &:hover {
          background: linear-gradient(135deg, rgba(24, 150, 146, 0.3) 0%, rgba(24, 150, 146, 0.2) 100%);
          border-color: rgba(24, 150, 146, 0.5);
          transform: translateY(-1px);
          box-shadow: 0 1px 4px rgba(24, 150, 146, 0.2);
        }
        
        &.clickable {
          cursor: pointer;
          
          &:hover {
            background: linear-gradient(135deg, rgba(24, 150, 146, 0.4) 0%, rgba(24, 150, 146, 0.3) 100%);
            border-color: rgba(24, 150, 146, 0.6);
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(24, 150, 146, 0.3);
          }
          
          &:active {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(24, 150, 146, 0.2);
          }
        }
      
      .info-label {
        color: #ffffff;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        gap: 2px;
        margin-bottom: 2px;
        text-align: center;
        
        &::before {
          content: '';
          width: 2px;
          height: 2px;
          background: #ffffff;
          border-radius: 50%;
          box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
          flex-shrink: 0;
        }
      }
      
      .info-value {
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        background: linear-gradient(135deg, rgba(24, 150, 146, 0.8) 0%, rgba(24, 150, 146, 0.6) 100%);
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid rgba(24, 150, 146, 0.5);
        text-align: center;
        box-shadow: 0 1px 3px rgba(24, 150, 146, 0.2);
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
          border-radius: 3px;
          pointer-events: none;
        }
      }
    }
  }
}

// 图标动画
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(1.2);
  }
}
</style>

